<%@ page import="com.bjpowernode.user.Provide" %>
<%@ page import="java.util.List" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Optional" %><%--
  Created by IntelliJ IDEA.
  User: 16219
  Date: 2022/4/25
  Time: 9:39
  To change this template use File | Settings | File Templates.
--%>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" +
            request.getServerPort() + request.getContextPath() + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <base href="<%=basePath%>">
    <%
        String username = (String) session.getAttribute("username");
        List<Provide> provideList = (List<Provide>) request.getAttribute("food");
    %>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        #left ul li{
            list-style: none;
        }
        a{
            text-decoration: none;
            color: white;
        }
        .dynamic{
            width: 850px;
            height: auto;
            margin-top: 10px;
            background: white;
        }
        .shang{
            height: 20px;
            width: 850px;
        }
        .name{
            margin-left: 30px;
            height: 30px;
            width: 790px;
        }
        .time{
            margin-top: 3px;
            margin-left: 30px;
            height: 20px;
            width: 790px;
        }
        .neirong{
            margin-top: 30px;
            margin-left: 30px;
            width: 790px;
            height: 200px;
        }
        .img{
            width: 150px;
            height: 150px;
            float: left;
        }
        .imgRight{
            margin-left: 20px;
            width: 200px;
            height: 150px;
            float: left;
        }
        .foodName{
            margin-left: 20px;
            margin-top: 10px;
        }
        .userInfo{
            margin-left: 20px;
            width: 350px;
            height: 150px;
            float: left;
        }
        .btn{
            color: white;
            outline: none;
            border: 0;
            background-color: rgb(255,129,64);
            width: 80px;height: 40px;
            margin-right: 10px;
            margin-top: 8px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" src="jQuery/jquery-3.5.1.js"></script>
    <script type="text/javascript">
        function showForm(index){
            document.getElementsByClassName("userInfo")[index].style.display = "block";
        }
        function subOrder(index,foodId){
            const username = document.getElementsByClassName("username")[index].value;
            if (username === "") {
                alert("姓名不可为空")
                return;
            }
            const phone = document.getElementsByClassName("phone")[index].value;
            if (phone === "") {
                alert("手机号不可为空")
                return;
            }
            const address = document.getElementsByClassName("address")[index].value;
            if (address === "") {
                alert("地址不可为空")
                return;
            }
            $.ajax({
                url:"order/addOrder.do",
                data:{
                    name:"<%=username%>",
                    foodId:foodId,
                    username:username,
                    phone:phone,
                    userAddress:address
                },
                success:function(response){
                    if (response.code == 0) {
                        alert("订单提交成功");
                        document.getElementById("formOne").submit();
                    }
                    else alert(response.message);
                },
                error:function(response){
                    alert("系统繁忙");
                }
            })
        }
    </script>
</head>
<body>
<form action="provide/loadAllFood.do" method="post" id="formOne"></form>
<%
    if (provideList.isEmpty()) {
%>
<center>
    <div style="background: white;width: 850px;height: 50px;line-height: 50px;margin-top: 10px">
        这里空空如也，还没有任何商家提供餐品。。。
    </div>
</center>
<%
    } else {
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
        for (int i = 0; i < provideList.size(); i++) {
            Provide provide = provideList.get(i);
%>
<center id="one">
    <div class="dynamic">
        <div class="shang">
        </div>
        <div class="name" align="left">
            <b><%=provide.getUsername()%></b>
        </div>
        <div class="time" align="left" style="color: #909090;font-size: 15px">
            <%=sdf.format(provide.getCreateTime())%>
        </div>
        <div class="neirong" align="left">
            <div class="img" align="left">
                <img src="<%=provide.getFoodPicture()%>" style="height: 150px; width: 150px"/>
            </div>
            <div class="imgRight" align="left">
                <div class="foodName">
                    <b><%=provide.getFoodName()%></b>
                </div>
                <div class="foodName">
                    ￥<%=provide.getFoodPrice()%>
                </div>
                <div class="foodName">
                    <font size="2px">已售:<%=Optional.ofNullable(provide.getCount()).orElse(0)%>份</font>
                </div>
                <div class="foodName">
                    <input type="button" value="立即购买" class="btn" onclick="showForm(<%=i%>)"/>
                </div>
            </div>
            <div class="userInfo" align="left" style="display: none">
                <form>
                    <table style="margin-left: 30px">
                        <tr>
                            <td style="width: 80px;height: 30px">姓名：</td>
                            <td style="width: 150px;height: 30px"><input class="username" type="text"/></td>
                        </tr>
                        <tr>
                            <td style="width: 80px;height: 30px">手机号：</td>
                            <td style="width: 150px;height: 30px"><input class="phone" type="text"/></td>
                        </tr>
                        <tr>
                            <td style="width: 80px;height: 30px">地址：</td>
                            <td style="width: 150px;height: 30px"><input class="address" type="text"/></td>
                        </tr>
                        <tr>
                            <td style="width: 80px;height: 30px" colspan="2">
                                <center><input type="button" value="提交订单" class="btn" onclick="subOrder(<%=i%>,<%=provide.getId()%>)"/></center>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </div>
</center>
<%
        }
    }
%>
</body>
</html>
